<template>
    <div class="card">
        <slot name="header" style="border-bottom: 1px solid #ccc;">
            <slot name="icon"></slot>
        </slot>
        <slot></slot>
        <slot name="footer"></slot>
    </div>
</template>
<script setup>
import { defineProps, computed, defineExpose } from "vue";
const props = defineProps({
    header: String,
    footer: String,
    bodyclass: String
})
const header = computed(() => {
    return 'header' + props.header
})
const footer = computed(() => {
    return 'footer' + props.footer
})
const bodyStyle = computed(() => {
    return 'bodyStyle' + props.bodystyle
})
defineExpose({
    header,
    footer,
    bodyStyle
})


</script>
<style>
.card {
    border: 1px solid #ccc;
    width: 200px;
}

.header {
    border-bottom: 1px solid #ccc;
}
</style>